<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/include/tasklibs.jsp" %>
<style>
	.mainInfo{
		background-color: #FFF;
	}
	.mainInfoContainer{
		padding: 26px 0 40px 23px;
	}
	.taskType{
		width: 65px;
		height: 65px;
		border-radius: 100px;
		text-align: center;
		color: #FFF;
		line-height: 65px;
		background-color: #293846;
		float: left;
		font-size: 18px;
	}
	.taskName{
		float: left;
		height: 65px;
		line-height: 65px;
		margin-left: 25px;
		font-size: 24px;
		color: #333333;
	}
	.taskStatus{
		padding-top: 34px;
		font-size: 16px;
	}
	.taskTime{
		padding-left: 105px;
	}
	.normalInfo{
		color: #666666;
		font-size: 14px;
		padding-top: 38px;
	}
	.attribute{
		margin: 10px 0;
		text-align: center;
	}
	.progressNum{
		margin: 40px 0 28px;
		text-align: center;
		font-size: 44px;
		color: #666666;
	}
	.openBtn{
		background-color: #465f77;
		height: 223px;
		line-height: 223px;
		text-align: center;
		color: #FFF;
		font-size: 50px;
	}
	.progressContainer{
		margin: 30px 0;
	}
	.circleContainer{
		text-align: center;
		background-color: #FFF;
	}
	.circleContainer .title{
		text-align: left;
		padding: 10px;
	}
	.circleContainer .title i{
		margin-right: 8px;
	}
	.circleContainer .col-md-4{
		position: relative;
	}
	.circleNum{
		font-size: 48px;
		color: #666666;
		text-align: center;
		position: absolute;
		height: 170px;
		line-height: 170px;
		margin-left: -42px;
		left: 57%;
	}
	.circleContainer .attribute{
		font-size: 16px;
		color: #89898a;
		margin-bottom: 50px;
	}
	.slideDiv{
		background: #465F77;
		color: #FFF;
		height: 0px;
		transition: all 1s;
		overflow: hidden;
	}
	.slideDiv .form-horizontal{
		padding-top: 20px;
	}
	.slideDiv.open{
		height: auto;
		transition: all 1s;
	}
	.fa-chevron-circle-right{
		transition: all 1s;
		cursor: pointer;
	}
	.rotate{
		transition: all 1s;
		transform: rotateZ(90deg);
	}
    .simditor .simditor-body {
        min-height: 180px;
    }
</style>
<div class="mainInfo row">
	
	<div class="col-md-10" style="padding-left: 0;">
		<button class="btn btn-default" type="button" onclick="goback()">返回</button>
		<div class="row mainInfoContainer">
			<div class="col-md-8">
				<div class="taskType">
                    ${parentTask.taskTypaName}
				</div>
				<div class="taskName">
					${parentTask.taskName}
				</div>
			</div>
			<div class="col-md-2 col-md-offset-2 taskStatus">
				状态：<span class="ing">${status}</span>
			</div>
			<div class="col-md-7 taskTime normalInfo">
				任务周期：${parentTask.startTime} ~ ${parentTask.endTime}
			</div>
			<div class="col-md-3 normalInfo">
				门店数：${childTaskNum}家
			</div>
			<div class="col-md-2 normalInfo">
				赏金：${parentTask.rewardName}/店
			</div>
		</div>
	</div>
	<div class="col-md-2 openBtn" id="openBtn">
		<i class="fa fa-chevron-circle-right"></i>
	</div>
	<div class="col-md-12 slideDiv">
		<form class="form-horizontal">	          		
	        <div class="form-group">
	            <label class="col-sm-2 control-label">任务要求</label>
	
	            <div class="col-sm-8">
	                <textarea id="requireEditor" placeholder="这里输入内容" autofocus>
	                    ${parentTask.taskRequire}
	                </textarea>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-2 control-label">任务指引</label>
	
	            <div class="col-sm-8">
	                <textarea id="guideEditor" placeholder="这里输入内容" autofocus>
	                    ${parentTask.taskGuidanceWords}
	                </textarea>
	            </div>
	        </div>
	<%--		<div class="form-group">
	            <label class="col-sm-2 control-label">附件</label>
	
	             <div class="col-sm-8" id="image">
					 
	            </div>
	        </div>--%>
            <div class="form-group">
                <label class="col-sm-2 control-label">附件照片</label>
                <div class="col-sm-8">
                    <div id="gallery" class="gallery">
                        <c:forEach var="imageUrl" items="${parentTask.imagesList}" varStatus="status">
                            <a href="${imageUrl}" title=""><img style="width:150px;height:150px;margin-bottom: 5px;" src="${imageUrl}"></a>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </form>
	</div>
</div>
<div class="row progressContainer">
    <div class="col-sm-4">
        <div class="ibox">
            <div class="ibox-content">
                <h2 class="progressNum">${allDays-alreadyDays}</h2>
                <div class="progress progress-mini">
                    <div style="width: ${allDays-alreadyDays}%;" class="progress-bar progress-bar-warning"></div>
                </div>

                <div class="attribute">剩余天数</div>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="ibox">
            <div class="ibox-content">
                <h2 class="progressNum">${finishTaskNumPercent}%</h2>
                <div class="progress progress-mini">
                    <div style="width: ${finishTaskNumPercent}%;" class="progress-bar"></div>
                </div>

                <div class="attribute">完成度</div>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="ibox">
            <div class="ibox-content">
                <h2 class="progressNum">${alreadyReward}</h2>
                <div class="progress progress-mini">
                    <div style="width: ${alreadyRewardPercent}%;" class="progress-bar progress-bar-danger"></div>
                </div>
                <div class="attribute">已支出赏金</div>
            </div>
        </div>
    </div>

</div>
<div class="row circleContainer">
	<div class="title"><i class="fa fa-tasks"></i>项目完成情况</div>
	<div class="col-md-4">
		<div class="circleNum">${pickUpNum}</div>
		<span class="donut" data-peity='{ "fill": ["#6BF9FE", "#eeeeee"],   "innerRadius": 75, "radius": 85 }'>${pickUpNumRate}</span>
		<div class="attribute">已接单</div>
	</div>
	<div class="col-md-4">
		<div class="circleNum">${waitCheck}</div>
		<span class="donut"  data-peity='{ "fill": ["#FE9B6B", "#eeeeee"],   "innerRadius": 75, "radius": 85 }'>${waitCheckRate}</span>
		<div class="attribute">待审核</div>
	</div>
	<div class="col-md-4">
		<div class="circleNum">${finishTaskNum}</div>
		<span class="donut" data-peity='{ "fill": ["#6CACE8", "#eeeeee"],   "innerRadius": 75, "radius": 85 }'>${finishTaskNumRate}</span>
		<div class="attribute">已完成</div>
	</div>
</div>
<script>
	function goback(){
		 $('.J_iframe').load('web/taskList.html');
	}
	var Controller = {
		initDonut: function(){
			$('.donut').peity('donut');
		},
		initEditor: function(){
			var requireEditor = new Simditor({
                textarea: $('#requireEditor'),
                toolbar: false,
                height: '100'
            });
            var guideEditor = new Simditor({
                textarea: $('#guideEditor'),
                toolbar: false
            });
		},
        initRebox: function(){
            $('#gallery').rebox({ selector: 'a' });
            $('#gallery').bind('rebox:open', function(e){
                $('.rebox').width($('.J_iframe').width() + 70);
                $('.rebox').appendTo($('.J_iframe'));
            });

        },
		initSlider: function(){
			var tag = $('.fa-chevron-circle-right');
			$('#openBtn').click(function(){
                alert(44);
				if(!tag.hasClass('rotate')){
					$('.slideDiv').addClass('open');
					tag.addClass('rotate');
				}else{
					$('.slideDiv').removeClass('open');
					tag.removeClass('rotate');
				}
				
			});
		},
		init: function(){
			Controller.initEditor();
			Controller.initDonut();
//			Controller.initRebox();
//			Controller.initSlider();
		}
	}
	$(function(){
        var tag = $('.fa-chevron-circle-right');
        $('#openBtn').click(function(){
            if(!tag.hasClass('rotate')){
                $('.slideDiv').addClass('open');
                tag.addClass('rotate');
            }else{
                $('.slideDiv').removeClass('open');
                tag.removeClass('rotate');
            }
        });
        $('#gallery').rebox({ selector: 'a' });
        $('#gallery').bind('rebox:open', function(e){
            $('.rebox').width($('.J_iframe').width() + 70);
            $('.rebox').appendTo($('.J_iframe'));
        });
		Controller.init();
		$(".simditor-body").attr('contenteditable',false);
	});
	
	
</script>